<template>
  <div>
    <Row>
      <Col span="12">col-12</Col>
      <Col span="12">col-12</Col>
    </Row>
    <br>
    <Row>
      <Col span="8">col-8</Col>
      <Col span="8">col-8</Col>
      <Col span="8">col-8</Col>
    </Row>
    <br>
    <Row :gutter="4">
      <Col span="6">
        <div>col6</div>
      </Col>
      <Col span="6">
        <div>col6</div>
      </Col>
      <Col span="6">
        <div>col6</div>
      </Col>
      <Col span="6">
        <div>col6</div>
      </Col>
    </Row>
    <Row>
    	<Col span="18" push="6">col-18 | push-6</Col>
    	<Col span="6" pull="18">ddd</Col>
    </Row>
    <Row>
        <Col span="18" push="6">col-18 | push-6</Col>
        <Col span="6" pull="18">col-6 | pull-18</Col>
        <Col span="6">col-6</Col>
        <Col span="18">col-18</Col>
    </Row>
    <Row>
      <Col span="8">Col 8</Col>
      <Col span="8" offset="2">span 8 | offfset 2</Col>
    </Row>
    <Row>
      <Col span="6" class="mr30">col 6</Col>
      <Col span="8" offset="1">span 8 | offset 1</Col>
    </Row>
    <div>
      <div span="6">span div 6</div>
      <div></div>
    </div>
  </div>
</template>

<script>
	export default {
    data () {
      return {
        msg: ''
      }
    }
  }
</script>

<style>
  .mr30 {
    margin-right: 30px;
  }
	div.ivu-col {
		background-color: #fafafa;
	}
	div.ivu-row {
		margin-bottom: 10px;
	}
</style>
